<template>
  <div>
    <el-dialog
      v-loading.lock="loading"
      class="base-dialog system-user-dialog"
      :custom-class="'panna-dialog_big'"
      :append-to-body="true"
      :title="dataList.PlanDetail"
      align="center"
      :close-on-click-modal="false"
      :visible.sync="dialogFormVisible"
      @closed="closeDialog"
    >
      <div>
        <DeviceVerificationPlanView :id.sync="id"></DeviceVerificationPlanView>
      </div>

      <div slot="footer" class="dialog-footer" align="center">
        <el-button type="primary" @click="Export">{{
          dataList.Export
        }}</el-button>
        <el-button @click="cancel">{{ btn.Cancel }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getList } from "../../../api/DeviceVerificationPlan.js";
import { export_json_to_excel } from "@/vendor/Export2Excel";
import DeviceVerificationPlanView from "./DeviceVerificationPlanView.vue";
import { formatTime } from "../../../utils/time";
export default {
  name: "DeviceVerificationPlanViewDialog",
  components: { DeviceVerificationPlanView },
  props: {
    dialogFormVisible: {
      type: Boolean,
      default: false,
    },
    id: {
      type: String,
      default: "0",
    },
  },
  data() {
    return {
      formatTime,
      listData: [],
      loading: false,
      pagination: {
        pageIndex: 1,
        pageSize: 10,
        total: 0,
      },
      from: {
        num: "",
        name: "",
        preparedName: "",
        preparedDate: "",
        remark: "",
      },

      // tHeader: [
      //   "设备编号",
      //   "设备名称",
      //   "型号规格",
      //   "责任人",
      //   "计划核查时间",
      //   "周期",
      //   "核查人",
      //   "是否核查",
      // ],
      filterVal: [
        "num",
        "name",
        "specifications",
        "personResponsibleName",
        "verificationPlanDate",
        "cycleName",
        "verificationPersonNam",
        "isVerification",
      ],
    };
  },
  computed: {
    displayedItems() {
      const startIndex =
        (this.pagination.pageIndex - 1) * this.pagination.pageSize;
      const endIndex = startIndex + this.pagination.pageSize;
      return this.from.deviceVerificationPlanInfoDtoList.slice(
        startIndex,
        endIndex
      );
    },
    btn() {
      return this.$t("ModuleDevice.buttons");
    },
    dataList() {
      return this.$t("ModuleDevice.Device");
    },
  },
  watch: {},
  created() {
    this.getList();
  },
  methods: {
    export_json_to_excel,
    formatJson(filterVal, jsonData) {
      return jsonData.map((v) =>
        filterVal.map((j) => {
          return v[j];
        })
      );
    },
    getList() {
      getList({ id: this.id }).then((res) => {
        if (res.data.dataList.length > 0) {
          this.from = res.data.dataList[0];
          this.pagination.total =
            this.from.deviceVerificationPlanInfoDtoList.length;
        }
      });
    },
    changePage(val) {
      this.pagination.pageIndex = val;
    },
    sizeChange(val) {
      this.pagination.pageIndex = 1;
      this.pagination.pageSize = val;
    },
    // 导出
    Export() {
      getList({ id: this.id }).then((res) => {
        var list = [];
        for (
          let i = 0;
          i < res.data.dataList[0].deviceVerificationPlanInfoDtoList.length;
          i++
        ) {
          var data = res.data.dataList[0].deviceVerificationPlanInfoDtoList[i];
          list.push({
            num: data.deviceDto.num,
            name: data.deviceDto.name,
            specifications: data.deviceDto.specifications,
            personResponsibleName: data.deviceDto.personResponsibleName,
            verificationPlanDate: this.formatTime(data.verificationPlanDate),
            cycleName: data.cycle + data.cycleName,
            verificationPersonNam: data.verPerson.name,
            isVerification:
              data.isVerification === 1 || data.isVerification === "1"
                ? this.dataList.Correct
                : this.dataList.Deny,
          });
        }

        var datas = this.formatJson(this.filterVal, list);
        const tHeader = [
          this.dataList.DeviceNumber,
          this.dataList.DeviceName,
          this.dataList.DeviceSpecifications,
          this.dataList.DevicePersonResponsibleId,
          this.dataList.ScheduledInspectionTime,
          this.dataList.Week,
          this.dataList.Inspector,
          this.dataList.CheckOrNot,
        ];
        export_json_to_excel({
          header: tHeader, // 表头
          data: datas, // 数据
          filename: this.dataList.InspectionPlanList2, // 导出文件名
          autoWidth: true, // 导出宽度自动
          bookType: "xlsx", // 导出后缀
        });
      });
    },
    cancel() {
      this.$emit("update:dialogFormVisible", false);
    },
    closeDialog() {
      this.$parent.getList();
      this.cancel();
    },
  },
};
</script>
<style scoped>
table {
  border-collapse: collapse; /* 合并边框，使其一致 */
  width: 100%;
}
table,
th,
td {
  border: 1px solid gainsboro; /* 设置边框的样式 */
  padding: 8px; /* 可选：设置单元格的内边距 */
}
td {
  text-align: center; /* 水平居中对齐 */
  vertical-align: middle; /* 垂直居中对齐 */
}
#styled-table2 tr:first-child {
  background-color: ghostwhite;
}

#styled-table td:nth-child(1),
#styled-table td:nth-child(3) {
  background-color: ghostwhite;
}
</style>
